// 公共仪表盘组件
var ComponentA = { 
    data:function(){
      return{
        datePicker:{dataStart:'',dataEnd:''},
        pickerOptionStart: {},
        pickerOptionEnd: {},
        resMap:storageLocal.getName('vehicle'),
        formDialogInfo: {},
        formDialogInfomini:{},
        currentPagemini:1,
        pageSizemini:19,
      }
    },
    props: ['dialogmiss','vincodemini'],
    mounted:function(){
      this.$nextTick(function(){
        // console.log(this.resMap)
      })
    },
    template: "<el-dialog title='车辆状态信息' :visible.sync='dialogmiss' :before-close='dialogmissClose'>\
                <el-row>\
                  <el-col :span='8'>\
                    <el-date-picker\
                      v-model='datePicker.dataStart'\
                      type='datetime'\
                      size='small'\
                      style='width: 100%'\
                      :picker-options='pickerOptionStart'\
                      @change='changeEnd'\
                      placeholder='开始日期'>\
                    </el-date-picker>\
                    <el-row type='flex' style='margin: 10px 0px 15px'>\
                        <el-date-picker\
                          v-model='datePicker.dataEnd'\
                          type='datetime'\
                          size='small'\
                          :picker-options='pickerOptionEnd'\
                          style='width: 100%'\
                          @change='changeStart'\
                          placeholder='结束日期'>\
                        </el-date-picker>\
                        <el-button type='primary' size='small' @click='handleSearch' v-show='resMap.queryStatusInfo' style='margin-left:10px'>搜索</el-button>\
                    </el-row>\
                    <el-table :data='formDialogInfo.getResult' border highlight-current-row size='small' max-height='400' @current-change='currentChange' style='width:100%' class='cursor'>\
                      <el-table-column type='index' label='序号'></el-table-column>\
                      <el-table-column prop='date' label='上传时间'></el-table-column>\
                    </el-table>\
                    <el-pagination\
                      layout='prev, pager, next'\
                      @current-change='handleCurrentChangemini'\
                      :current-page.sync='currentPagemini'\
                      :pager-count='5'\
                      :page-size='pageSizemini'\
                      style='margin-top: 10px'\
                      :total='formDialogInfo.totalElement'>\
                    </el-pagination>\
                  </el-col>\
                  <el-col :span='16'>\
                    <div id='gagua' style='height: 250px'></div>\
                    <div class='el-more-list'>\
                      <div class='el-more-item'>\
                        <span>累计里程(km)：</span>\
                        <span>{{formDialogInfomini.totalMileage}}</span>\
                      </div>\
                      <div class='el-more-item'>\
                        <span>总电压(V)：</span>\
                        <span>{{formDialogInfomini.totalVoltage}}</span>\
                      </div>\
                      <div class='el-more-item'>\
                        <span>总电流(A)</span>\
                        <span>{{formDialogInfomini.totalCurrent}}</span>\
                      </div>\
                      <div class='el-more-item'>\
                        <span>经度</span>\
                        <span>{{formDialogInfomini.lng}}</span>\
                      </div>\
                      <div class='el-more-item'>\
                        <span>纬度</span>\
                        <span>{{formDialogInfomini.lat}}</span>\
                      </div>\
                      <div class='el-more-item'>\
                        <span>驱动电机状态</span>\
                        <span>{{formDialogInfomini.driveMotorStatus}}</span>\
                      </div>\
                      <div class='el-more-item'>\
                        <span>驱动电机转矩</span>\
                        <span>{{formDialogInfomini.driveMotorTorque}}</span>\
                      </div>\
                      <div class='el-more-item'>\
                        <span>充电状态</span>\
                        <span>{{formDialogInfomini.chargStatus}}</span>\
                      </div>\
                      <div class='el-more-item'>\
                        <span>车辆状态</span>\
                        <span>{{formDialogInfomini.status}}</span>\
                      </div>\
                    </div>\
                    <div style='margin-left: 20px'>\
                      <el-button type='text' @click='carStatusInfoMore' v-show='resMap.queryStatusDetailInfo'>更多>></el-button>\
                    </div>\
                  </el-col>\
                </el-row>\
              </el-dialog>",
    methods:{
        handleSearch:function(){//输入时间 检索车辆状态信息
            if(!this.datePicker.dataStart || !this.datePicker.dataEnd){this.$message.warning('请选择时间段，查看状态...');return}
            this.currentPagemini = 1;
            this.requestModelmini()
        },        
        handleCurrentChangemini:function(val) {//gauge-分页
            this.requestModelmini()
        },
        currentChange:function(val) {//gauge-table-click
            var _this = this;
            if(!val) return
            this.formDialogInfomini = val;
            //组织 仪表盘要改变的数据 
            option.series[0].data[0].value = parseFloat(_this.formDialogInfomini.driveMotorSpeed)//转速
            option.series[1].data[0].value = parseFloat(_this.formDialogInfomini.speed)//速度
            option.series[2].data[0].value = parseFloat(_this.formDialogInfomini.soc)//电量
            option.series[3].data[0].value = parseFloat(_this.formDialogInfomini.driveMotorTemp)//温度
            myChart.setOption(option,true)
            console.log("currentChange",this.formDialogInfomini)
        },
        carStatusInfoMore:function(){
            var vinCode = escape(this.vincodemini);
            var date = escape(this.formDialogInfomini.date);
            window.open("./car-VehicleManagement-more.html?code="+vinCode+"&date="+date)
        },
        requestModelmini:function(){
            var _this = this;
            var startTime = this.datePicker.dataStart?this.format(this.datePicker.dataStart,"yyyy-MM-dd HH:mm:ss"):'';
            var endTime = this.datePicker.dataEnd?this.format(this.datePicker.dataEnd,"yyyy-MM-dd HH:mm:ss"):'';
            var data = {
                "vinCode":this.vincodemini,
                "page":this.currentPagemini - 1,
                "pageSize":this.pageSizemini,
                "startTime":startTime,
                "endTime":endTime
            }
            resourceRequst("/vehicle/queryStatusInfo",data,function(res){
                _this.formDialogInfo = res;
                if(res.getResult.length<1) {_this.$message('今日暂无数据...'); return}
                _this.formDialogInfomini = res.getResult[0]
                //组织 仪表盘要改变的数据 
                option.series[0].data[0].value = parseFloat(_this.formDialogInfomini.driveMotorSpeed)//转速
                option.series[1].data[0].value = parseFloat(_this.formDialogInfomini.speed)//速度
                option.series[2].data[0].value = parseFloat(_this.formDialogInfomini.soc)//电量
                option.series[3].data[0].value = parseFloat(_this.formDialogInfomini.driveMotorTemp)//温度
                myChart.setOption(option,true)
                console.log("requestModelmini",_this.formDialogInfomini)
            })
        },
        showGauge:function(){//显示 仪表盘
            var dom = document.getElementById("gagua");
            myChart = echarts.init(dom);
            option = {
                tooltip : {//弹窗组件
                    formatter: "{a} <br/>{c} {b}"
                },
                series : [
                    {
                        name:'转速',
                        type:'gauge',
                        center : ['20%', '55%'],    // 默认全局居中
                        radius : '60%',
                        min:0,
                        max:7,
                        endAngle:45,
                        splitNumber:7,
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                width: 8
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            length :12,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                        splitLine: {           // 分隔线
                            length :20,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },
                        pointer: {
                            width:5
                        },
                        title : {
                            offsetCenter: [0, '-25%'],       // x, y，单位px
                            textStyle:{
                                fontSize:10
                            }
                        },
                        detail : {
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder',
                                fontSize:23
                            }
                        },
                        data:[{value: 0, name: 'x1000 r/m'}]
                    },
                    {
                        name:'速度',
                        type:'gauge',
                        z: 3,
                        min:0,
                        max:220,
                        radius : '90%',
                        splitNumber:11,
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                width: 10
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            length :15,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                        splitLine: {           // 分隔线
                            length :20,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },
                        title : {
                            offsetCenter: ['-5%', '-35%'],
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder',
                                fontSize: 20,
                                fontStyle: 'italic'
                            }
                        },
                        detail : {
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder'
                            }
                        },
                        data:[{value: 0, name: 'km/h'}]
                    },
                    {
                        name:'电量',
                        type:'gauge',
                        center : ['80%', '50%'],    // 默认全局居中
                        radius : '60%',
                        min:0,
                        max:100,
                        startAngle:135,
                        endAngle:45,
                        splitNumber:2,
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: [[0.2, '#ff4500'],[0.8, '#48b'],[1, '#228b22']], 
                                width: 8
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            splitNumber:5,
                            length :10,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto'
                            }
                        },
                        axisLabel: {
                            formatter:function(v){
                                switch (v + '') {
                                    case '0' : return 'L';
                                    case '50' : return 'Soc';
                                    case '100' : return 'H';
                                }
                            }
                        },
                        splitLine: {           // 分隔线
                            length :15,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },
                        pointer: {
                            width:2
                        },
                        title : {
                            show: false
                        },
                        detail : {
                            show: false
                        },
                        data:[{value: 5, name: '%'}]
                    },
                    {
                        name:'温度',
                        type:'gauge',
                        center : ['80%', '50%'],    // 默认全局居中
                        radius : '60%',
                        min:-40,
                        max:210,
                        startAngle:315,
                        endAngle:225,
                        splitNumber:2,
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: [[0.2, '#ff4500'],[0.8, '#48b'],[1, '#228b22']], 
                                width: 8
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            show: false
                        },
                        axisLabel: {
                            formatter:function(v){
                                switch (v + '') {
                                    case '-40' : return 'L';
                                    case '85' : return 'Temp';
                                    case '210' : return 'H';
                                }
                            }
                        },
                        splitLine: {           // 分隔线
                            length :15,         // 属性length控制线长
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: 'auto'
                            }
                        },
                        pointer: {
                            width:2
                        },
                        title : {
                            show: false
                        },
                        detail : {
                            show: false
                        },
                        data:[{value: -40, name: '℃'}]
                    }
                ]
            };
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        },
        dialogmissClose:function(){
            this.currentPagemini = 1
            this.$emit('dialog-hidden')
        },
        setFloop:function(){
            var _this = this
            setTimeout(function(){
                if(document.getElementById("gagua")){
                _this.showGauge()                
                _this.requestModelmini();
                }else{
                _this.setFloop()
                }
            },500)
        },
        format:function(time, format){
            var t = time;
            var tf = function(i){return (i < 10 ? '0' : '') + i};
            return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a){
                switch(a){
                    case 'yyyy':
                        return tf(t.getFullYear());
                        break;
                    case 'MM':
                        return tf(t.getMonth() + 1);
                        break;
                    case 'mm':
                        return tf(t.getMinutes());
                        break;
                    case 'dd':
                        return tf(t.getDate());
                        break;
                    case 'HH':
                        return tf(t.getHours());
                        break;
                    case 'ss':
                        return tf(t.getSeconds());
                        break;
                }
            })
        },
        changeStart:function(){
            var _this = this.datePicker.dataEnd;
            this.pickerOptionStart = Object.assign({},this.pickerOptionStart,{
                disabledDate:function(time){
                    if(_this){
                    var curDate = _this.getTime();
        
                    var h = _this.getHours() *60*60;
                    var m = _this.getMinutes() *60;
                    var s = _this.getSeconds();
                    var mm = (h+m+s)*1000;
        
                    if(mm>0){
                        return time.getTime() > curDate || time.getTime() < curDate-mm;;
                    }else{
                        return time.getTime() > curDate || time.getTime() < curDate;;
                    }
                    }else{
                    return time.getTime() > Date.now()
                    }
                }
            })
        },
        changeEnd:function(){
            var _this = this.datePicker.dataStart;
            this.pickerOptionEnd = Object.assign({},this.pickerOptionEnd,{
                disabledDate:function(time){
                    if(_this){
                        var curDate = _this.getTime();

                        var h = _this.getHours() *60*60;
                        var m = _this.getMinutes() *60;
                        var s = _this.getSeconds();
                        var mm = (h+m+s)*1000;

                        if(mm>0){
                        return time.getTime() > curDate || time.getTime() < curDate-mm;;
                        }else{
                        return time.getTime() > curDate || time.getTime() < curDate;;
                        }

                    }else{
                        return time.getTime() > Date.now()
                    }
                    }
            })
        }
    },
    watch:{
      dialogmiss:function(res){
        if(res){
            this.setFloop()
        }
      }
    }
}

window.onresize = function(){
    if(document.getElementById("gagua")){
        myChart.resize()
    }
}